
<template>
    <div class="flexible provider">
      <el-collapse-transition>
        <div v-show="status.queryShow">
          <div class="transition-box">el-collapse-transition</div>
          <div class="transition-box">el-collapse-transition</div>
        </div>
      </el-collapse-transition>
      <ul class="header-buttons">
        <li>
          <z-button title="刷新" icon="refresh" color="#40485b" @click="pageQuery"> </z-button>
          <z-button icon="add" @click="onAdd" v-if="purview(2)">新增</z-button>
          <z-button icon="delete" type="danger" :disabled="!table.selection.length" @click="onDel(table.selection.map(r => r.id))" v-if="purview(4)">
            删除
          </z-button>
        </li>
        <li class="dis-flex">
          <p>
            <el-input v-model="params.keyword" v-debounce="pageQuery" @clear="pageQuery" placeholder="支持名称模糊搜索" clearable class="mr-10"></el-input>
          </p>
          <el-button-group class="ml-10">
            <columnSetting v-model="table.columns" name="provider/GetPage" />
            <z-button icon="query" type="" title="展开通用搜索" @click="status.queryShow = !status.queryShow"></z-button>
          </el-button-group>
        </li>
      </ul>
      <el-table :data="table.data" class="flexible-table" border stripe @selection-change="onTableChange" tooltip-effect>
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column
          v-for="(item, index) in table.columns.filter(r => r.show)"
          :width="item.width"
          :min-width="item.minWidth"
          :prop="item.id"
          :label="item.label"
          :key="item.id + index"
          show-overflow-tooltip
          align="center"
        >
          <template #default="scope">
            <template v-if="item.id === 'operate'">
              <z-button icon="xiugai" size="small" title="编辑" @click="onEdit(scope.row)" v-if="purview(3)"></z-button>
              <z-button icon="delete" type="danger" size="small" title="删除" @click="onDel([scope.row.id])" v-if="purview(4)"></z-button>
            </template>
            <template v-else-if="item.id === 'providerContactsLabel'">
              <el-popover :width="600" trigger="hover">
                <template #reference>
                  {{ scope.row.providerContactsLabel }}
                </template>
                <el-table :data="scope.row.providerContacts">
                  <el-table-column prop="contactName" label="名称" width="120" />
                  <el-table-column prop="contactPhone" label="联系方式" width="120" />
                  <el-table-column prop="contactNote" label="备注" />
                  <el-table-column prop="isDefault" label="是否默认" width="100" align="center">
                    <template #default="scope">
                      <el-tag :type="scope.row.isDefault ? 'success' : 'danger'" effect="dark" :closable="false">
                        {{ scope.row.isDefault ? '是' : '否' }}
                      </el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </el-popover>
            </template>
            <template v-else>
              {{ scope.row[item.id] }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="flexible-pagination">
        <el-pagination
          v-model:current-page="params.pageIndex"
          v-model:page-size="params.pageSize"
          :page-sizes="[10, 30, 60, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.totalCount"
          @size-change="handleSizeChange"
          @current-change="pageQuery"
        />
      </div>
      <providerEdit v-model="status.show" @onSave="onSaveCallback" :editData="status.editData" />
    </div>
  </template>
  <script setup>
  import providerEdit from './components/providerEdit.vue';
  import { custTypeData, custLevelType } from '@/config/data';
  import { post } from '@/api/index';
  let { purview } = inject('$global');
  let $message = inject('$message');
  let table = reactive({
    columns: [
      { label: '供应商编号', id: 'providerSerialNo', show: true, minWidth: 150 },
      { label: '供应商名称', id: 'providerName', show: true, minWidth: 150 },
      { label: '供应商所属', id: 'belongType', show: true, width: 100 },
      { label: '省市区', id: 'provincesName', show: true, minWidth: 100 },
      { label: '等级', id: 'levelType', show: true, width: 80 },
      { label: '负责人', id: 'officeName', show: true, width: 100 },
      { label: '联系人信息', id: 'providerContactsLabel', show: true, minWidth: 100 },
      { label: '备注', id: 'note', show: true, minWidth: 100 },
      { label: '操作', id: 'operate', show: true }
    ],
    data: [],
    totalCount: 0,
    selection: []
  });
  let status = reactive({
    show: false,
    editData: {},
    queryShow: false
  });
  let params = reactive({
    pageIndex: 1,
    pageSize: 30,
    keyword: ''
  });
  const pageQuery = async () => {
    let { result } = await post('provider/GetPage', params);
    table.data = result.items.map(r => {
      let defaultData = r.providerContacts.find(row => row.isDefault);
      return {
        ...r,
        ...{
          belongType: custTypeData.find(row => r.belongType === row.value).label,
          levelType: custLevelType.find(row => r.levelType === row.value).label,
          provincesName: `${r.provincesName} - ${r.address}`,
          providerContactsLabel: defaultData
            ? defaultData.contactName + '-' + defaultData.contactPhone
            : r.providerContacts.map(r => r.contactName + '-' + r.contactPhone).join(';')
        }
      };
    });
    if (result.columnJson) table.columns = JSON.parse(result.columnJson);
    table.totalCount = result.totalCount;
  };
  
  const onAdd = () => {
    status.editData = {};
    status.show = true;
  };
  const onEdit = val => {
    status.editData = val;
    status.show = true;
  };
  const onDel = async val => {
    await post('Role/BulkDelete', { ids: val });
    $message.success('删除成功');
    pageQuery();
  };
  // 创建 保存 回调
  const onSaveCallback = () => {
    pageQuery();
    status.show = false;
  };
  const onTableChange = val => {
    table.selection = val;
  };
  const onSwitchChange = async (id, item) => {
    const obj = { isEnable: '/UpdateEnable', isRequired: '/UpdateRequired' };
    await post(`CustomProductSpec${obj[item.id]}`, {
      id
    });
    $message.success('修改状态成功');
  };
  const handleSizeChange = val => {
    params.pageIndex = 1;
    pageQuery();
  };
  // 初始化
  onActivated(() => {
    pageQuery();
  });
  </script>
  
  <style lang="scss" scoped>
  .provider {
    background-color: #fff;
  }
  .header-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  </style>
  